<template>
  <div class="message">
    <div class="mask">
      <vue-danmaku
        v-model="danmus"
        :loop="true"
        :speeds="150"
        :randomChannel="true"
        :debounce="800"
        :top="30"
        :useSlot="true"
        style="height: 100px; width: 300px"
        ref="danmu"
      >
        <template slot="dm" slot-scope="{ index, danmu }">
          <div class="bubble" :class="index == insertId ? 'insert' : ''">
            {{ danmu.content }} ~
            {{ danmu.created_time.substr(5, 5) }}
          </div>
        </template>
      </vue-danmaku>
      <textarea
        type="type"
        class="massage-content"
        placeholder="来都来了, 留个脚印儿呗~"
        v-model="content"
        @keyup.enter="onSubmit"
      />
    </div>
  </div>
</template>

<script>
import vueDanmaku from 'vue-danmaku'
export default {
  name: 'HomeViewMessage',
  components: {
    vueDanmaku,
  },
  data() {
    return {
      content: '',
      messages: [],
      // danmus: ['danmu1', 'danmu2', 'danmu3', '...'],
      danmus: [
        { id: 'danmu1', content: '111' },
        { id: 'danmu2', content: '222' },
        { id: 'danmu3', content: '333' },
        { id: 'danmu4', content: '444' },
      ],
      // 当前插入的弹幕的id, 用于控制样式
      insertId: -1,
    }
  },
  created() {
    this.getMessages()
  },
  methods: {
    getMessages() {
      this.$http.get('/messages').then((res) => {
        // console.log(res)
        const { code, result } = res
        if (code == 0) {
          // console.log('this.danmus', this.danmus)
          this.danmus = result
          // console.log('this.danmus', this.danmus)
          // console.log('this.$refs', this.$refs)
          // this.$refs.danmu.play()
        }
      })
    },
    onSubmit() {
      if (this.content == '') {
        alert('留言内容不能为空')
        return
      }
      let content = this.content
      // 清空输入框
      this.content = ''
      this.$http.post('/messages', { content }).then((res) => {
        // console.log(res)
        if (res.code == 0) {
          // this.getMessages()

          // 发送弹幕（插入到当前播放位置，实时显示）
          this.insertId =
            this.$refs.danmu.add({
              id: '0',
              content,
              created_time: new Date().toISOString(),
            }) - 1
        }
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.message
  position: relative;
  position: fixed;
  width: 100%;
  height: 100vh;
  background white
  z-index: 3;
  &::before
    content: url('@/assets/images/background/messages.jpeg')
    position: absolute;
    position: fixed;
    width: 100%;
    height: 100vh;
    opacity 0.7
  .mask
    position: absolute;
    display flex
    flex-direction: column
    justify-content center
    align-items center
    height: 100vh;
    width: 100vw;
    transition: all .5s
    background-color: var(--mask);
    .vue-danmaku
      position: fixed !important
      width: 100vw !important
      height: 100vh !important
    textarea
      width 800px
      height 60px
      margin-bottom: 120px;
      padding: 10px 30px;
      border: none;
      background-color: rgba(0,0,0,0.5);
      color: #ccc;
      font-size: 27px;
      outline: 0;
      border-radius: 29px;
      z-index: 5
.bubble
  height: 40px
  width: auto
  max-width: 500px
  background rgba(0,0,0,0.3)
  border-radius: 50px
  white-space: nowrap
  padding: 0 20px
  line-height:40px
  box-sizing:  border-box
  transition all .5s
  &:hover
    color: #ff638a
  &.insert
    background rgba(255, 99, 138, 0.2)
    color rgba(255, 99, 138, 1)
    border 1px solid rgba(255, 99, 138,0.9)
</style>
